<template>
	<view>
		<view class="flex justify-center align-center font-lg font-weight-bold" style="padding-top: 100rpx; padding-bottom: 80rpx;">欢迎回来</view>
		<view class="p-4">
			<input type="text" placeholder="手机号/用户名/邮箱" class="uni-input font mb-2 rounded bg-muted" v-model="form.username" />
			<input type="text" password placeholder="密码" class="uni-input font mb-2 rounded bg-muted" v-model="form.password"/>
			<input v-if="!isLogin" type="text" password placeholder="确认密码" class="uni-input font rounded bg-muted"  v-model="form.repassword"/>
		</view>
		<view hover-class="bg-main-hover" class="bg-main text-white font-lg rounded-circle text-center m-3"
		style="height: 80rpx; line-height: 80rpx;" @click="submit">{{isLogin?'登 录':'注 册'}}</view>
		
		<view class="flex justify-center align-center">
			<view style="width: 100rpx; background-color: #E3E1DD; line-height: 1rpx; height: 1rpx;"></view>
			<view class="text-muted font-sm mx-2">社交账号登录</view>
			<view style="width: 100rpx; background-color: #E3E1DD; line-height: 1rpx; height: 1rpx;" ></view>
		</view>
		
		<view class="m-5 flex align-center">
			<view class="flex-1 flex align-center justify-center">
				<view class="bg-light rounded-circle flex align-center justify-center" style="width: 100rpx; height: 100rpx;">
					<text class="iconfont iconweixin text-muted" style="font-size: 40rpx;"></text>
				</view>
			</view>
			<view class="flex-1 flex align-center justify-center">
				<view class="bg-light rounded-circle flex align-center justify-center" style="width: 100rpx; height: 100rpx;">
					<text class="iconfont iconQQ text-muted" style="font-size: 40rpx;"></text>
				</view>
			</view>
			<view class="flex-1 flex align-center justify-center">
				<view class="bg-light rounded-circle flex align-center justify-center" style="width: 100rpx; height: 100rpx;">
					<text class="iconfont iconxinlangweibo text-muted" style="font-size: 40rpx;"></text>
				</view>
			</view>
		</view>
		
		<view class="flex align-center justify-center font text-muted" @click="typeChange">
			<text>{{isLogin?'没有账号？注册一个吧':'用户名密码登录'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// true:为登录，false:为注册
				isLogin:true,
				form:{
					username:'',
					password:'',
					repassword:''
				}
				
			}
		},
		methods: {
			typeChange(){
				this.isLogin = !this.isLogin
				uni.setNavigationBarTitle({
					title:this.isLogin?'登录':'注册'
				})
				this.clearForm()
			},
			submit(){
				if(this.isLogin){
					// 登录
					this.$H.post('/login',this.form).then(res => {
						this.$store.dispatch('login',res).then(r1 => {
							uni.showToast({
								title:'登录成功',
								icon:'none'
							})
							this.clearForm()
							setTimeout(()=>{
								uni.switchTab({
									url:'../my/my'
								})
							},500)
						}).catch(err=>{
							return uni.showToast({
								title:'登录失败:'+err,
								icon:'none'
							})
						})
					})
				}
				else {
					//注册
					this.$H.post('/reg',this.form).then(res => {
						this.typeChange()
						uni.showToast({
							title:'注册成功,请登录',
							icon:'none'
						})
					})
				}
				
			},
			clearForm(){
				this.form = {
					username:'',
					password:'',
					repassword:''
				}
			}
		}
	}
</script>

<style>

</style>
